<template>
  <div id="personalGroup">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>个人通讯录</el-breadcrumb-item>
      <el-breadcrumb-item>分组管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="list">
      <div id="listbox">
        <el-row>
          <el-button type="primary" @click="addbtn">增加</el-button>
          <el-button type="primary" @click="delbtn">删除</el-button>
        </el-row>
      </div>
      <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%" @select="chooseCheckbox">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="group_name" label="分组名称" width="240">

        </el-table-column>

        <el-table-column prop="group_number" label="编号" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="block">

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="group.length" :hide-on-single-page="onepage">
        </el-pagination>
      </div>
    </div>

    <!-- 删除分组的弹框 -->
    <div>
      <el-dialog title="系统提示" :visible.sync="visible_1" width="30%">
        <span>确定要删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closedialog">取 消</el-button>
          <el-button type="primary" @click="delgroup">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 新增分组的弹框 -->
    <div>
      <el-dialog title="新增分组" :visible.sync="visible">
        <el-form :model="form">
          <el-form-item label="分组名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分组编号(数字)" :label-width="formLabelWidth">
            <el-input v-model="form.region" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closedialog">取 消</el-button>
          <el-button type="primary" @click="addgroup">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      count: 10,
      visible: false,
      visible_1: false,
      delarr: [],
      delarrNumber: [],
      form: {
        name: "",
        region: "",
      },
      formLabelWidth: "120px",
      group: [],
      onepage: false

    };
  },
  // 函数
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.count = val
      console.log(this.count)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      console.log(this.currentPage)
    },
    // 有数据选中时可以点击删除框
    chooseCheckbox(selection, row) {
      this.delarr = selection
    },

    closedialog() {
      this.visible = false
      this.visible_1 = false

    },
    // 获取分组的数据
    getPersonalGroup() {
      this.$axios({
        url: "/addressbook/personal/group/get",

      }).then((res) => {

        this.group = res.data.data;
      });
    },
    //点击增加按钮
    addbtn() {
      this.visible = !this.visible;

    },
    //添加分组数据
    addgroup() {
      this.visible = false;
      this.$axios({
        url: "/addressbook/personal/group/add",
        method: "post",
        data: {
          name: this.form.name,
          number: this.form.region,
        }
      }).then((res) => {

        if (res.data.code == 200) {
          // 需要更新数据
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getPersonalGroup()
          this.form.name = ""
          this.form.region = ""
        }
      });

    },
    // 点击删除按钮
    delbtn() {
      if (this.delarr.length) { this.visible_1 = !this.visible_1; }

      else {
        alert('未选中数据')
      }
    },
    // 删除分组数据
    delgroup() {
      this.visible_1 = false;
      for (let i = 0; i < this.delarr.length; i++) {
        this.delarrNumber.push(this.delarr[i].group_id)
      }
      this.$axios({
        url: "/addressbook/personal/group/del",
        method: "post",
        data: {
          arr: this.delarrNumber
        }
      }).then((res) => {
        console.log(res.data)
        this.getPersonalGroup()
        this.$message({
          message: res.data,
          type: "success",
        });
      })
      this.delarrNumber = []
    },

  },
  created: function () {
    this.getPersonalGroup()
  },
  computed: {
    tableData: function () {

      return this.group.slice((this.currentPage - 1) * this.count, this.currentPage * this.count);

    }

  },
  watch: {
    tableData: function () {
      this.$store.commit("setgroup", { //传入仓库
        group: this.tableData
      });
    }
  }


};
</script>

<style scoped>
#personalGroup {
  height: 100%;
  text-align: left;
  line-height: 16px;
}
.el-breadcrumb {
  height: 7%;
}
#list {
  background-color: white;
  position: relative;
  height: 93%;
}

#listbox {
  padding: 10px 0 10px 20px;
  font-size: 16px;
}
thead {
  background-color: #e4e4e4;
}
/* .el-table,
.el-table__cell {
  padding: 9px, 0 !important;
} */
.block {
  position: absolute;
  right: 0;
  margin-top: 10px;
}
</style>
